<template>
  <div style="height: 500px;">
    <TChat :data="data">
    </TChat>
    <TSpace direction="vertical">
      <t-chat-item avatar="https://tdesign.gtimg.com/site/avatar.jpg" name="自己" role="user" datetime="今天16:38"
        content="牛顿第一定律是否适用于所有参考系？" variant="text"></t-chat-item>
      <t-chat-item avatar="https://tdesign.gtimg.com/site/avatar.jpg" name="自己" role="user" datetime="今天16:38"
        content="牛顿第一定律是否适用于所有参考系？" variant="outline"></t-chat-item>
      <t-chat-item avatar="https://tdesign.gtimg.com/site/avatar.jpg" name="自己" role="user" datetime="今天16:38"
        content="牛顿第一定律是否适用于所有参考系？" variant="base"></t-chat-item>
    </TSpace>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { type TdChatItemMeta } from "@tdesign-vue-next/chat";

const data = ref<TdChatItemMeta[]>([
  {
    avatar: 'https://tdesign.gtimg.com/site/chat-avatar.png',
    content: '它叫 McMurdo Station ATM，是美国富国银行安装在南极洲最大科学中心麦克默多站的一台自动提款机。',
    role: 'assistant',
  },
  {
    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
    content: '南极的自动提款机叫什么名字？',
    role: 'user',
  }])


setInterval(() => {
  data.value.push({
    avatar: 'https://tdesign.gtimg.com/site/avatar.jpg',
    content: '南极的自动提款机叫什么名字？',
    role: 'user',
  })
}, 50000000);
</script>

<style scoped></style>
